<template>
  <div class="statistics-root">
    <div class="header" v-if="inspectInfo != null">
      <stat-page-header @change="setOrgData" :inspect-info="inspectInfo"></stat-page-header>
    </div>
    <div class="body" v-if="inspectInfo != null">
      <div class="stat-column wide">
        <div class="stat-row narrow">
          <div class="com-container yh-sj">
            <hidden-danger-data :inspect-info="inspectInfo" :org-item="orgItem"></hidden-danger-data>
          </div>
          <div class="com-container qk-ph">
            <rectification-situation-statistics :inspect-info="inspectInfo"
                                                :org-item="orgItem"></rectification-situation-statistics>
          </div>
        </div>
        <div class="stat-row wide">
          <div class="com-container">
            <rectification-situation-ranking :inspect-info="inspectInfo"
                                             :org-item="orgItem"></rectification-situation-ranking>
          </div>
        </div>
      </div>
      <div class="stat-column narrow">
        <div class="stat-row narrow">
          <div class="com-container">
            <hidden-danger-source-statistics :inspect-info="inspectInfo"
                                             :org-item="orgItem"></hidden-danger-source-statistics>
          </div>
        </div>
        <div class="stat-row wide">
          <div class="com-container">
            <spot-check :inspect-info="inspectInfo" :org-item="orgItem"></spot-check>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {inspectMixins} from "@/views/checkBusPage/mixins/inspectMixins";
import HiddenDangerData from "@/views/checkStatisticsPage/components/hiddenDangerData/index.vue";
import rectificationSituationStatistics
  from "@/views/checkStatisticsPage/components/rectificationSituationStatistics/index.vue";
import RectificationSituationRanking
  from "@/views/checkStatisticsPage/components/rectificationSituationRanking/index.vue";
import HiddenDangerSourceStatistics
  from "@/views/checkStatisticsPage/components/hiddenDangerSourceStatistics/index.vue";
import spotCheck from "@/views/checkStatisticsPage/components/spotCheck/index.vue";
import StatPageHeader from "@/views/checkStatisticsPage/components/statPageHeader/index.vue";

export default {
  name: "check_statistics_page",
  mixins: [inspectMixins],
  components: {
    StatPageHeader,
    HiddenDangerData,
    rectificationSituationStatistics,
    RectificationSituationRanking,
    HiddenDangerSourceStatistics,
    spotCheck
  },
  data() {
    return {
      orgItem: null
    }
  },
  methods: {
    setOrgData(orgItem) {
      this.orgItem = orgItem
    }
  }
}
</script>

<style lang="scss" scoped>
.statistics-root {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .header, .body {
    width: 100%;
  }

  .header {
    height: 50px;
    margin-bottom: 10px;
  }

  .body {
    height: calc(100% - 60px);
    display: flex;
    justify-content: space-between;
  }

  .stat-column {
    height: 100%;
    display: flex;
    flex-direction: column;

    &.wide {
      width: 58%
    }

    &.narrow {
      width: 40%;
    }
  }

  .stat-row {
    width: 100%;
    display: flex;

    &.wide {
      height: 63%;
    }

    &.narrow {
      height: 35%;
      margin-bottom: 2%;
    }
  }

  .com-container {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    padding: 10px 20px;

    &.yh-sj {
      width: 35%;
      padding-right: 20px;
    }

    &.qk-ph {
      width: 65%;
    }
  }
}
</style>
